<template>
  <div class="meeting-management-container">
    <!-- 搜索表单 -->
    <el-form v-show="showSearch" ref="queryForm" :inline="true" :model="queryParams" label-width="120px" size="small">
      <el-form-item label="会议名称" prop="meetingName">
        <el-input
            v-model="queryParams.meetingName"
            clearable
            placeholder="请输入会议名称"
            @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="会议状态" prop="status">
        <el-select v-model="queryParams.status" clearable filterable placeholder="请选择会议状态">
          <el-option :value="0" label="待审核"/>
          <el-option :value="1" label="已发布"/>
          <el-option :value="2" label="已拒绝"/>
        </el-select>
      </el-form-item>
      <el-form-item label="开始时间" prop="startTime">
        <el-date-picker
            v-model="queryParams.startTime"
            clearable
            placeholder="请选择开始时间"
            type="date"
            value-format="YYYY-MM-DD"
        />
      </el-form-item>
      <el-form-item label="结束时间" prop="endTime">
        <el-date-picker
            v-model="queryParams.endTime"
            clearable
            placeholder="请选择结束时间"
            type="date"
            value-format="YYYY-MM-DD"
        />
      </el-form-item>
      <el-form-item>
        <el-button icon="Search" type="primary" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 操作按钮 -->
    <el-row :gutter="10" class="mb8 operation-buttons">
      <el-col :span="24" class="button-group">
        <el-button
            v-hasPermi="['business:meetings:add']"
            icon="Plus"
            plain
            type="primary"
            @click="handleAdd"
        >新增
        </el-button>

        <el-button
            v-hasPermi="['business:meetings:remove']"
            :disabled="multiple"
            icon="Delete"
            plain
            type="danger"
            @click="handleDelete"
        >删除
        </el-button>

        <el-dropdown v-hasPermi="['business:meetings:review']" :disabled="multiple" @command="handleReview">
          <el-button :disabled="multiple" icon="Check" plain type="success">
            审核
            <el-icon class="el-icon--right">
              <arrow-down/>
            </el-icon>
          </el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item :command="0" :disabled="isBatchOptionDisabled(0)">取消发布</el-dropdown-item>
              <el-dropdown-item :command="1" :disabled="isBatchOptionDisabled(1)">审核发布</el-dropdown-item>
              <el-dropdown-item :command="2" :disabled="isBatchOptionDisabled(2)">拒绝发布</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </el-col>
    </el-row>

    <!-- 数据表格 -->
    <el-table v-loading="loading" :data="meetingList" @selection-change="handleSelectionChange">
      <el-table-column align="center" type="selection" width="55"/>
      <el-table-column align="center" label="会议ID" prop="id" width="80"/>
      <el-table-column label="会议名称" prop="meetingName">
        <template #default="{row}">
          <el-tooltip :content="row.meetingName" effect="light" placement="top">
            <span class="text-ellipsis">{{ row.meetingName }}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column align="center" label="封面" prop="coverImage" width="100">
        <template #default="scope">
          <image-preview :height="50" :src="scope.row.coverImage" :width="50"/>
        </template>
      </el-table-column>
      <el-table-column label="会议地点" prop="location">
        <template #default="{row}">
          <el-tooltip :content="row.location" effect="light" placement="top">
            <span class="text-ellipsis">{{ row.location }}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column align="center" label="会议时间" width="160">
        <template #default="scope">
          <div style="margin-bottom: 4px;">
            <span>{{ formatTime(scope.row.startTime) }}</span>
          </div>
          <div style="margin-bottom: 4px;">
            <span>{{ formatTime(scope.row.endTime) }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="创建人" prop="nickName" width="100"/>
      <el-table-column label="审核备注" prop="auditRemark" show-overflow-tooltip/>
      <el-table-column align="center" label="审核时间" prop="auditTime" width="120">
        <template #default="scope">
          <span>{{ formatTime(scope.row.auditTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="创建时间" prop="createTime" width="120">
        <template #default="scope">
          <span>{{ formatTime(scope.row.createTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="发布状态" prop="status" width="80">
        <template #default="scope">
          <el-tag :type="statusTagType[scope.row.status]">
            {{ statusMap[scope.row.status] }}
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column align="center" class-name="small-padding fixed-width" label="操作" width="140">
        <template #default="scope">
          <div style="margin-bottom: 4px;">
            <el-button icon="View" link size="small" @click="handleEdit(scope.row, true)">查看</el-button>

            <el-button v-hasPermi="['business:meetings:edit']" :disabled="scope.row.status !== 0" icon="Edit" link
                       size="small"
                       type="primary"
                       @click="handleEdit(scope.row,false)">修改
            </el-button>
          </div>

          <div>
            <el-button v-hasPermi="['business:meetings:remove']" :disabled="scope.row.status !== 0" icon="Delete" link
                       size="small"
                       type="danger"
                       @click="handleDelete(scope.row)">删除
            </el-button>

            <el-dropdown v-hasPermi="['business:meetings:review']" size="small"
                         @command="(status) => handleReview(scope.row, status)">
              <el-button v-hasPermi="['business:meetings:review']" icon="Check" link size="small" type="success">
                审核
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item :command="0" :disabled="scope.row.status === 0">取消发布</el-dropdown-item>
                  <el-dropdown-item :command="1" :disabled="scope.row.status === 1">审核发布</el-dropdown-item>
                  <el-dropdown-item :command="2" :disabled="scope.row.status === 2 || scope.row.status === 1">拒绝发布
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <pagination
        v-show="total > 0"
        v-model:limit="queryParams.pageSize"
        v-model:page="queryParams.pageNum"
        :total="total"
        @pagination="getList"
    />

    <!-- 添加/修改会议对话框 -->
    <el-dialog v-model="open" :title="title" append-to-body width="50%" @close="handleDialogClose">
      <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="会议名称" prop="meetingName">
          <el-input v-model="form.meetingName" :disabled="isView" placeholder="请输入会议名称"/>
        </el-form-item>
        <el-form-item label="会议封面" prop="coverImage">
          <image-upload v-model="form.coverImage" :disabled="isView"/>
        </el-form-item>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="开始时间" prop="startTime">
              <el-date-picker
                  v-model="form.startTime"
                  :disabled="isView"
                  placeholder="请选择开始时间"
                  style="width: 100%"
                  type="datetime"
                  value-format="YYYY-MM-DD HH:mm:ss"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="结束时间" prop="endTime">
              <el-date-picker
                  v-model="form.endTime"
                  :disabled="isView"
                  placeholder="请选择结束时间"
                  style="width: 100%"
                  type="datetime"
                  value-format="YYYY-MM-DD HH:mm:ss"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="会议地点" prop="location">
          <el-input v-model="form.location" :disabled="isView" placeholder="请输入会议地点"/>
        </el-form-item>
        <el-form-item label="会议议程" prop="agenda">
          <editor v-model="form.agenda" :disabled="isView" :min-height="100"/>
        </el-form-item>
        <el-form-item label="研讨内容" prop="discussionTopics">
          <editor v-model="form.discussionTopics" :disabled="isView" :min-height="100"/>
        </el-form-item>
        <el-form-item label="标准定制" prop="standardsDevelopment">
          <editor v-model="form.standardsDevelopment" :disabled="isView" :min-height="100"/>
        </el-form-item>
        <el-form-item label="技术培训" prop="technicalTraining">
          <editor v-model="form.technicalTraining" :disabled="isView" :min-height="100"/>
        </el-form-item>
        <el-form-item label="工具研发" prop="toolDevelopment">
          <!--          <el-input v-model="form.toolDevelopment" :disabled="isView" placeholder="请输入工具研发内容" type="textarea"/>-->
          <editor v-model="form.toolDevelopment" :disabled="isView" :min-height="100"/>
        </el-form-item>
        <el-form-item label="公益行动" prop="publicActionItems">
          <div class="public-actions-container">
            <div v-for="(item, index) in form.publicActionItems" :key="item.key || index" class="public-action-item">
              <el-row :gutter="20" class="action-row">
                <el-col :span="8">
                  <el-form-item
                      :prop="`publicActionItems.${index}.pic`"
                      :rules="rules.publicActionsPic"
                      class="fixed-height-form-item"
                  >
                    <image-upload
                        v-model="item.pic"
                        :disabled="isView"
                        :multiple="false"
                        :thumbHeight="50"
                        :thumbWidth="50"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item
                      :prop="`publicActionItems.${index}.name`"
                      :rules="rules.publicActionsName"
                      class="fixed-height-form-item"
                  >
                    <el-input v-model="item.name" :disabled="isView" placeholder="名称"/>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item
                      :prop="`publicActionItems.${index}.url`"
                      :rules="rules.publicActionsUrl"
                      class="fixed-height-form-item"
                  >
                    <el-input v-model="item.url" :disabled="isView" placeholder="链接地址 http://xxx.com"/>
                  </el-form-item>
                </el-col>
                <el-col :span="2" class="action-buttons-col">
                  <div class="action-buttons">
                    <el-button
                        v-if="index === form.publicActionItems.length - 1 && !isView"
                        icon="Plus"
                        plain
                        size="small"
                        type="primary"
                        @click="addPublicAction"
                    />
                    <el-button
                        v-if="form.publicActionItems.length > 1 && !isView"
                        icon="Delete"
                        plain
                        size="small"
                        type="danger"
                        @click="removePublicAction(index)"
                    />
                  </div>
                </el-col>
              </el-row>
            </div>
            <div v-if="form.publicActionItems.length === 0 && !isView" class="add-first-action">
              <el-button
                  icon="Plus"
                  plain
                  type="primary"
                  @click="addPublicAction"
              >添加公益行动
              </el-button>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="嘉宾介绍" prop="guestIntroductions">
          <el-input v-model="form.guestIntroductions" :disabled="isView" placeholder="请输入嘉宾介绍" type="textarea"/>
        </el-form-item>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="创建人" prop="nickName">
              <el-input v-model="form.nickName" :disabled="true" placeholder="创建人"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="创建时间" prop="createTime">
              <el-date-picker
                  v-model="form.createTime"
                  :disabled="true"
                  placeholder="请选择创建时间"
                  style="width: 100%"
                  type="datetime"
                  value-format="YYYY-MM-DD HH:mm:ss"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="审核时间" prop="auditTime">
              <el-date-picker
                  v-model="form.auditTime"
                  :disabled="true"
                  placeholder="审核时间"
                  style="width: 100%"
                  type="datetime"
                  value-format="YYYY-MM-DD HH:mm:ss"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="更新时间" prop="updateTime">
              <el-date-picker
                  v-model="form.updateTime"
                  :disabled="true"
                  placeholder="请选择更新时间"
                  style="width: 100%"
                  type="datetime"
                  value-format="YYYY-MM-DD HH:mm:ss"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="cancel">取 消</el-button>
          <el-button v-if="!isView" type="primary" @click="submitForm">确 定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import {onMounted, reactive, ref} from 'vue'
import {ElMessage, ElMessageBox} from 'element-plus'
import {ArrowDown} from '@element-plus/icons-vue'
import {addMeetings, delMeetings, listMeetings, reviewMeetings, updateMeetings} from '@/api/business/meetings.js'
import {parseTime} from '@/utils/common'
import {listUserInfo} from "@/api/system/user.js"
import useUserStore from '@/store/modules/user'

const userStore = useUserStore()
const userList = ref([])

// 状态映射
const statusMap = ['待审核', '已发布', '已拒绝']
const statusTagType = ['warning', 'success', 'danger']

// 数据状态
const loading = ref(true)
const showSearch = ref(true)
const ids = ref([])
const single = ref(true)
const multiple = ref(true)
const total = ref(0)
const meetingList = ref([])
const title = ref('')
const open = ref(false)
const isView = ref(false)

// 查询参数
const queryParams = reactive({
  pageNum: 1,
  pageSize: 10,
  meetingName: undefined,
  startTime: undefined,
  endTime: undefined,
  location: undefined,
  status: undefined
})

// 表单初始值
const formData = {
  id: undefined,
  meetingName: '',
  coverImage: '',
  startTime: '',
  endTime: '',
  location: '',
  agenda: '',
  discussionTopics: '',
  standardsDevelopment: '',
  technicalTraining: '',
  toolDevelopment: '',
  publicActions: [],
  publicActionItems: [],
  guestIntroductions: '',
  creatorId: '',
  nickName: '',
  auditorId: '',
  auditorName: '',
  auditTime: '',
  auditRemark: '',
  status: 0,
  createTime: '',
  updateTime: ''
}

// 表单数据
const form = reactive({...formData})

// 表单验证规则
const rules = reactive({
  meetingName: [
    {required: true, message: '会议名称不能为空', trigger: 'blur'},
    {min: 2, max: 50, message: '长度在2到10个字符之间', trigger: 'blur'}
  ],
  publicActionsPic: [
    {
      validator: (rule, value, callback) => {
        const index = rule.field.split('.')[1]
        const item = form.publicActionItems[index]
        // 如果三个字段都为空，则不校验
        if (!item.pic && !item.name && !item.url) {
          callback()
          return
        }
        // 如果有任何一个字段为空，则报错
        if (!item.pic || !item.name || !item.url) {
          callback(new Error('请完整填写该行公益行动信息'))
        } else if (item.pic && !/^https?:\/\/.+/i.test(item.pic)) {
          callback(new Error('图片地址格式不正确'))
        } else {
          callback()
        }
      },
      trigger: 'change'
    }
  ],
  publicActionsName: [
    {
      validator: (rule, value, callback) => {
        const index = rule.field.split('.')[1]
        const item = form.publicActionItems[index]
        // 如果三个字段都为空，则不校验
        if (!item.pic && !item.name && !item.url) {
          callback()
          return
        }
        // 如果有任何一个字段为空，则报错
        if (!item.pic || !item.name || !item.url) {
          callback(new Error('请完整填写该行公益行动信息'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    },
    {min: 2, max: 50, message: '长度在2到50个字符之间', trigger: 'blur'}
  ],
  publicActionsUrl: [
    {
      validator: (rule, value, callback) => {
        const index = rule.field.split('.')[1]
        const item = form.publicActionItems[index]
        // 如果三个字段都为空，则不校验
        if (!item.pic && !item.name && !item.url) {
          callback()
          return
        }
        // 如果有任何一个字段为空，则报错
        if (!item.pic || !item.name || !item.url) {
          callback(new Error('请完整填写该行公益行动信息'))
        } else if (item.url && !/^https?:\/\/.+/i.test(item.url)) {
          callback(new Error('请输入有效的URL地址'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ],
  startTime: [
    {required: true, message: '开始时间不能为空', trigger: 'blur'}
  ],
  endTime: [
    {required: true, message: '结束时间不能为空', trigger: 'blur'},
    {
      validator: (rule, value, callback) => {
        if (form.startTime && value && new Date(value) < new Date(form.startTime)) {
          callback(new Error('结束时间不能早于开始时间'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ],
  location: [
    {required: true, message: '会议地点不能为空', trigger: 'blur'}
  ],
  agenda: [
    {required: true, message: '会议议程不能为空', trigger: 'blur'}
  ]
})

// 引用
const queryForm = ref()
const formRef = ref()

// 方法
const formatTime = (time) => {
  return time ? parseTime(time, '{y}-{m}-{d} {h}:{i}') : ''
}

/**
 * 获取会议列表数据
 */
const getList = async () => {
  loading.value = true
  try {
    const {rows, total: count} = await listMeetings(queryParams)
    meetingList.value = rows || []
    total.value = count || 0
  } catch (error) {
    console.error('获取会议列表失败:', error)
    ElMessage.error('获取会议列表失败，请稍后重试')
    meetingList.value = []
    total.value = 0
  } finally {
    loading.value = false
  }
}

// 重置查询表单
const resetQuery = () => {
  queryForm.value.resetFields()
  handleQuery()
}

// 查询按钮操作
const handleQuery = () => {
  queryParams.pageNum = 1
  getList()
}

// 多选框选中数据
const tableRowClassName = ({row, rowIndex}) => {
  return rowIndex % 2 === 1 ? 'even-row' : 'odd-row'
}

const handleSelectionChange = (selection) => {
  ids.value = selection.map(item => item.id)
  single.value = selection.length !== 1
  multiple.value = !selection.length
}

// 新增按钮操作
const handleAdd = () => {
  reset()
  isView.value = false
  const now = parseTime(new Date())
  form.createTime = now
  form.updateTime = now
  form.nickName = userStore.nickName
  form.creatorId = userStore.id
  open.value = true
  title.value = '添加会议'
}

// 修改按钮操作
const handleEdit = async (row, viewMode = false) => {
  reset()
  try {
    Object.assign(form, row)

    // 解析publicActions字段为数组
    if (form.publicActions) {
      try {
        const publicActions = JSON.parse(form.publicActions)
        form.publicActionItems = Array.isArray(publicActions)
            ? publicActions.map(item => ({...item, key: Date.now()}))
            : [publicActions].filter(item => item).map(item => ({...item, key: Date.now()}))
      } catch (e) {
        console.warn('解析publicActions失败:', e)
        form.publicActionItems = [{pic: '', name: '', url: '', key: Date.now()}]
      }
    } else {
      form.publicActionItems = [{pic: '', name: '', url: '', key: Date.now()}]
    }

    open.value = true
    isView.value = viewMode
    title.value = viewMode ? '查看会议' : '修改会议'
  } catch (error) {
    console.error('获取会议详情失败:', error)
    ElMessage.error('获取会议详情失败，请稍后重试')
  }
}

// 删除按钮操作
const handleDelete = async (row) => {
  try {
    const idsToDelete = row?.id ? [row.id] : ids.value
    if (idsToDelete.length === 0) {
      return ElMessage.warning('请先选择要删除的会议')
    }

    await ElMessageBox.confirm(
        `确认删除选中的${idsToDelete.length > 1 ? `${idsToDelete.length}个会议` : '该会议'}吗?`,
        '警告',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
    )

    await delMeetings(idsToDelete)
    ElMessage.success('删除成功')
    getList()
  } catch (error) {
    if (error !== 'cancel') {
      console.error('删除操作失败:', error)
      ElMessage.error(`删除失败: ${error.message || '未知错误'}`)
    }
  }
}

// 审核操作
const handleReview = async (rowOrStatus, status) => {
  try {
    const isBatchOperation = !rowOrStatus.id
    const operationStatus = isBatchOperation ? rowOrStatus : status
    const idsToReview = isBatchOperation ? ids.value : [rowOrStatus.id]

    if (idsToReview.length === 0) {
      return ElMessage.warning('请先选择要操作的会议')
    }

    const actionText = operationStatus === 0 ? '取消发布' : operationStatus === 1 ? '审核发布' : '拒绝发布'
    const targetText = idsToReview.length > 1 ? `选中的${idsToReview.length}个会议` : '该会议'

    // 第一步确认操作
    await ElMessageBox.confirm(
        `确认${actionText}${targetText}吗?`,
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
    )

    // 第二步弹出审核备注输入框
    const {value: auditRemark} = await ElMessageBox.prompt(
        '请输入审核备注',
        '审核备注',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputType: 'textarea',
          inputPlaceholder: '请输入审核备注内容',
          inputValidator: (value) => {
            if (!value) {
              return '请填写审核备注'
            }
            return true
          }
        }
    )

    // 调用审核接口，传递审核备注
    await reviewMeetings({
      ids: idsToReview,
      status: operationStatus,
      auditRemark: auditRemark || ''
    })

    ElMessage.success('操作成功')
    getList()
  } catch (error) {
    if (error === 'cancel') {
      // 用户点击了取消按钮，不做任何操作
    } else {
      console.error('审核操作失败:', error)
      ElMessage.error(`操作失败: ${error.message || '未知错误'}`)
    }
  }
}

const isBatchOptionDisabled = (optionStatus) => {
  if (!ids.value.length) return true
  const selectedItems = meetingList.value.filter(item => ids.value.includes(item.id))
  const allStatusSame = selectedItems.every(item => item.status === selectedItems[0].status)

  if (!allStatusSame) return false

  const currentStatus = selectedItems[0].status
  if (currentStatus === 0) return optionStatus === 0
  if (currentStatus === 1) return optionStatus === 1 || optionStatus === 2
  if (currentStatus === 2) return optionStatus === 0 || optionStatus === 2
  return false
}

// 添加公益行动项
function addPublicAction() {
  form.publicActionItems.push({
    pic: '',
    name: '',
    url: '',
    key: Date.now() // 添加唯一key
  })
}

// 删除公益行动项
const removePublicAction = (index) => {
  form.publicActionItems.splice(index, 1)
}

// 表单提交
const submitForm = () => {
  formRef.value.validate(async (valid) => {
    if (!valid) return

    // 处理公益行动字段为JSON数组
    const validItems = form.publicActionItems.filter(item =>
        item.pic || item.name || item.url
    )
    form.publicActions = validItems.length > 0
        ? JSON.stringify(validItems)
        : ''

    try {
      if (form.id) {
        await updateMeetings(form)
        ElMessage.success('修改成功')
      } else {
        await addMeetings(form)
        ElMessage.success('新增成功')
      }
      open.value = false
      getList()
    } catch (error) {
      console.error('表单提交失败:', error)
      ElMessage.error(`操作失败: ${error.message || '未知错误'}`)
    }
  })
}

// 重置表单数据
const reset = () => {
  try {
    formRef.value?.resetFields()
    Object.assign(form, formData)
    form.publicActionItems = []
  } catch (error) {
    console.error('重置表单失败:', error)
  }
}

// 取消按钮
const cancel = () => {
  open.value = false
  reset()
}

// 处理对话框关闭事件
const handleDialogClose = () => {
  cancel()
}

// 加载用户列表
const loadUserList = async () => {
  try {
    const {rows} = await listUserInfo()
    userList.value = rows || []
  } catch (error) {
    console.error('加载用户列表失败:', error)
    userList.value = []
  }
}

// 组件挂载时加载数据
onMounted(() => {
  loadUserList()
  getList()
})
</script>

<style scoped>
.el-table {
  :deep(.odd-row) {
    background-color: #f8fafc;
  }

  :deep(.even-row) {
    background-color: #ffffff;
  }

  :deep(.el-table__row) {
    td {
      padding: 12px 0;
    }
  }
}

.meeting-management-container {
  padding: 20px;
}

.operation-buttons {
  margin-bottom: 16px;
  padding: 12px;
  background-color: #f5f7fa;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.button-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
  align-items: center;
}

.button-group:last-child {
  margin-bottom: 0;
}

.el-button-group .el-button {
  margin-right: 0;
}

.el-table :deep(.el-table__cell) {
  padding: 12px 0;
}

.el-table :deep(.el-button--small) {
  padding: 5px 8px;
  margin: 2px 0;
}

.el-form-item {
  margin-bottom: 16px;
}

.mb8 {
  margin-bottom: 8px;
}

/* 公益行动列表项样式 */
.public-actions-container {
  width: 100%;
}

.public-action-item {
  margin-bottom: 16px;
  padding: 12px;
  background-color: #f8fafc;
  border-radius: 4px;
  border: 1px solid #e4e7ed;
  transition: all 0.3s ease;
}

.public-action-item:hover {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.action-row {
  display: flex;
  align-items: center;
}

.action-buttons-col {
  display: flex;
  justify-content: flex-end;
}

.action-buttons {
  display: flex;
  gap: 8px;
}

.action-buttons .el-button {
  margin: 0;
  width: 32px;
  height: 32px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fixed-height-form-item {
  height: 80px;
  margin-bottom: 0;
  display: flex;
  align-items: center;
}

.fixed-height-form-item :deep(.el-form-item__content) {
  line-height: normal;
}

.add-first-action {
  margin-top: 8px;
  text-align: center;
}

/* 表单元素间距调整 */
:deep(.el-form-item__content) {
  line-height: normal;
}

/* 查看模式下的样式调整 */
.public-action-item.is-view {
  background-color: transparent;
  border: none;
  padding: 0;
}


</style>
